<template>
  <div class="user-management">
    <div class="user-management-search">
      <div class="user-search-item">
        <input
          class="search-item-username"
          placeholder="请输入用户姓名/账号"
          v-model.trim="userSearch.userName"
          @keyup.enter="searchUserList"
        />
      </div>
      <div class="user-search-item">
        <span class="option-item-name">科室</span>
        <el-select v-model="userSearch.deptName" filterable>
          <el-option
            v-for="item in deptList"
            :key="item.deptName"
            :label="item.deptName"
            :value="item.deptName"
          >
          </el-option>
        </el-select>
      </div>
      <div class="user-search-item">
        <span class="option-item-name">职位</span>
        <el-select v-model="userSearch.job" filterable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="btn-bg btn user-btn" @click="searchUserList">查询</div>
      <div class="btn-back btn" @click="reSearchUserList">重置</div>
    </div>

    <div class="user-show">
      <div class="creat btn btn-bg" @click="turnCreat">
        <img src="@/assets/images/creat-icon.png" />
        <span>创建账号</span>
      </div>
      <!-- 表格展示 -->
      <div class="table-height">
        <el-table :data="tableData" align="center" border style="width: 100%">
          <el-table-column prop="userName" label="账号" align="center">
          </el-table-column>
          <el-table-column prop="realName" label="用户姓名" align="center">
          </el-table-column>
          <el-table-column prop="sex" label="性别" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.sex == "0" ? "男" : "女" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="job" label="职位" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.job ? scope.row.job : "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="deptName" label="科室" align="center">
            <template slot-scope="scope">
              <span>{{ !scope.row.deptName ? "--" : scope.row.deptName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系方式"
            align="center"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{ !scope.row.phone ? "--" : scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleActive(scope.$index, scope.row)"
                >{{ scope.row.status == "1" ? "禁用" : "启用" }}</el-button
              >
              <!-- <el-button v-if="admin" size="mini" type="danger" @click="rePassword(scope.$index, scope.row)">重置密码</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pages">
        <span>共{{ total }}条</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageData.pageNum"
          :page-size="pageData.pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <span>Go></span>
      </div>
    </div>
    <!--  编辑框 -->
    <el-dialog title="" :visible.sync="dialogTableVisible" width="73%">
      <div class="check-result edit">
        <img src="@/assets/images/edit-icon.png" alt="" />
        编辑资料
      </div>
      <div class="edit-content">
        <div class="edit-content-left">
          <div class="edit-content-left-item">
            <span>账号</span>
            <el-input v-model.trim="editData.userName" disabled> </el-input>
            <span>账号不可修改</span>
          </div>
          <div class="edit-content-left-item">
            <span>账户密码</span>
            <el-input v-model.trim="editData.password" disabled> </el-input>
            <span>密码不可修改</span>
          </div>
          <div class="edit-content-left-item">
            <span>用户姓名</span>
            <el-input v-model.trim="editData.realName"> </el-input>
            <span>修改名称</span>
          </div>
          <div class="edit-content-left-item">
            <span>性别</span>
            <el-radio-group v-model="editData.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </div>
          <div class="edit-content-left-item">
            <span class="option-item-name">职位</span>
            <el-select v-model="editData.job" filterable>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="edit-content-left-item">
            <span class="option-item-name">科室</span>
            <el-select v-model="editData.deptName" filterable>
              <el-option
                v-for="item in deptList"
                :key="item.deptName"
                :label="item.deptName"
                :value="item.deptName"
              >
              </el-option>
            </el-select>
          </div>
          <div class="edit-content-left-item">
            <span>联系方式</span>
            <el-input
              placeholder="请输入内容"
              v-model.trim="editData.phone"
              clearable
            >
            </el-input>
          </div>
        </div>
        <div class="edit-content-right">
          <div class="upload" v-if="!imageUrl">
            <div class="upload-content">
              <img src="@/assets/images/upload-bg.png" alt="" />
              <br />
              点击上传头像
            </div>
          </div>
          <div class="uploaded" v-else></div>
          <div class="upload-success">{{ uploadTips }}</div>
          <div class="upload-tips">
            <span>点击图片重新上传头像</span>
            <br />
            图片大小不得超过1M，宽：150，高：120
          </div>
        </div>
        <!-- 编辑框  头像上传 -->
        <el-upload
          class="avatar-uploader"
          name="avatarfile"
          :headers="headers"
          :action="HTTP_IMG_URL + '/system/user/profile/uploadAvatar'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <div class="edit-re-btns">
        <div class="check-result-btns re-btns">
          <div class="btn-bg btn" @click="sureEditUser">确认</div>
          <div class="btn-back btn" @click="editCancel">取消</div>
        </div>
        <div class="btn-back btn rePsd" @click="rePassword">重置密码</div>
      </div>
    </el-dialog>

    <!--  创建账号框 -->
    <el-dialog title="" :visible.sync="dialogTableVisibleCreat" width="73%">
      <div class="check-result edit">
        <img src="@/assets/images/creat-icon.png" alt="" />
        创建账号
      </div>
      <div class="edit-content">
        <div class="edit-content-left">
          <div class="edit-content-left-item">
            <span>账号</span>
            <el-input v-model.trim="addUserData.userName"> </el-input>
            <span>请输入你要创建的账号ID</span>
          </div>
          <div class="edit-content-left-item">
            <span>账户密码</span>
            <el-input v-model.trim="addUserData.password" type="password">
            </el-input>
            <span>请输入密码</span>
          </div>
          <div class="edit-content-left-item">
            <span>密码确认</span>
            <el-input
              v-model.trim="surePassword"
              type="password"
              @blur="checkPassword"
            >
            </el-input>
            <span>再次输入密码，确保两次输入一致</span>
          </div>
          <div class="edit-content-left-item">
            <span>用户姓名</span>
            <el-input v-model.trim="addUserData.realName"> </el-input>
            <span>你的名字</span>
          </div>
          <div class="edit-content-left-item">
            <span>性别</span>
            <el-radio-group v-model="addUserData.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </div>
          <div class="edit-content-left-item">
            <span class="option-item-name">职位</span>
            <el-select v-model="addUserData.job" filterable>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span class="option-item-tips">你的职位</span>
          </div>
          <div class="edit-content-left-item">
            <span class="option-item-name">科室</span>
            <el-select v-model="addUserData.deptName" filterable>
              <el-option
                v-for="item in deptList"
                :key="item.deptName"
                :label="item.deptName"
                :value="item.deptName"
              >
              </el-option>
            </el-select>
            <span class="option-item-tips">请选择你所属科室</span>
          </div>
          <div class="edit-content-left-item">
            <span>联系方式</span>
            <el-input
              placeholder="请输入内容"
              v-model.trim="addUserData.phone"
              clearable
            >
            </el-input>
            <span>你的联系方式手机号码</span>
          </div>
        </div>
        <div class="edit-content-right">
          <div class="upload" v-if="!imageUrl">
            <div class="upload-content">
              <img src="@/assets/images/upload-bg.png" alt="" />
              <br />
              点击上传头像
            </div>
          </div>
          <div class="uploaded" v-else></div>
          <div class="upload-success">{{ uploadTips }}</div>
          <div class="upload-tips">
            <span>点击图片上传头像</span>
            <br />
            图片大小不得超过1M，宽：150，高：120
          </div>
        </div>
        <!-- 新增框 头像上传 -->
        <el-upload
          class="avatar-uploader"
          name="avatarfile"
          :headers="headers"
          :action="HTTP_IMG_URL + '/system/user/profile/uploadAvatar'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="creatAvatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <div class="check-result-btns edit-btns">
        <div class="btn-bg btn" @click="sureAddUserData">确认</div>
        <div class="btn-back btn" @click="clearUserData">重置</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getInfo,
  getUserList,
  changeStatus,
  deptList,
  updateAvatar,
  editUser,
  addUser,
  doctorJobList,
  resetPwd,
} from "@/api/user";
import { uploadFile } from "@/api/common";

import { validPhone } from "@/utils/validate";
import { Message } from "element-ui";
import { AVATAR_URL, HTTP_IMG_URL } from "@/config";
export default {
  data() {
    return {
      admin: false, //是否为admin
      userSearch: {
        userName: "",
        deptName: "",
        job: "",
      },

      pageData: {
        pageSize: 5, //每页数量
        pageNum: 1, //分页
      },
      total: 1,
      dialogTableVisible: false, //编辑框显隐
      dialogTableVisibleCreat: false, //账号创建显隐
      headers: {
        //照片上传请求头
        Authorization: "Bearer " + sessionStorage.getItem("token"),
      },
      imageUrl: "", //编辑框头像地址、新增框头像地址
      uploadTips: "", //头像上传成功提示
      editData: {
        //编辑用户信息
        userId: "",
        userName: "",
        password: "· · · · · ·",
        realName: "",
        sex: "男",
        job: "主任医师",
        deptName: "",
        phone: "",
        avatar: "",
        roleType: "1",
      },
      surePassword: "", //确认密码
      addUserData: {
        //新增用户信息
        userId: sessionStorage.userId,
        userName: "",
        password: "",
        realName: "",
        sex: "男",
        job: "主任医师",
        deptName: "",
        phone: "",
        avatar: "",
        // roleType: '1',
      },
      options: [], //职位数据
      tableData: [], //用户列表数据
      deptList: [], //科室数据
      uploadFile: "",
      HTTP_IMG_URL,
      uploadStatus: true, //上传头像状态
      telStatus: true, //判断号码
      psdStatus: true, //判断密码
    };
  },
  created() {
    // 获取列表数据
    this.getUserList({
      ...this.pageData,
      ...this.userSearch,
    });
    // 获取科室数据
    this.getDeptList();
    // 获取职位数据
    this.doctorJobList();
    // 获取用户信息
    this.getInfo();
  },
  watch: {
    // 翻页请求数据
    "pageData.pageNum"() {
      this.getUserList({
        ...this.pageData,
        ...this.userSearch,
      });
    },

    // 监听 编辑框、新增用户框 关闭，清除上传头像回显地址、提示
    dialogTableVisible(newStatus) {
      if (!newStatus) {
        this.imageUrl = "";
        this.uploadTips = "";
        this.telStatus = true;
      }
    },
    dialogTableVisibleCreat(newStatus) {
      if (!newStatus) {
        this.imageUrl = "";
        this.uploadTips = "";
        this.telStatus = true;
      }
    },
  },
  methods: {
    /**
     * 用户信息
     */
    async getInfo() {
      const res = await getInfo();
      if (res.code != 200) return;
      this.admin = res.user.admin;
      // console.log(1111,typeof res.user.admin);
    },

    /**
     * 用户列表
     */
    async getUserList(data) {
      const res = await getUserList(data);
      console.log("用户列表", res);
      if (res.code != 200) return;
      this.tableData = [...res.rows];
      this.total = res.total;
    },

    /**
     * 职位列表
     */
    async doctorJobList() {
      const res = await doctorJobList();
      // console.log('职位数据', res);
      if (res.code != 200) return;
      this.options = res.data
        .map((item) => ({
          label: item.jobName,
          value: item.jobName,
        }))
        .reverse();
    },

    /**
     * 用户列表搜索查询
     */
    searchUserList() {
      this.getUserList({
        ...this.pageData,
        ...this.userSearch,
      });
    },

    /**
     * 清空用户列表搜索查询
     */
    reSearchUserList() {
      this.userSearch = {
        userName: "",
        deptName: "",
        job: "",
      };
      this.pageData = {
        pageSize: 5,
        pageNum: 1,
      };
      this.getUserList({
        ...this.pageData,
        ...this.userSearch,
      });
    },

    /**
     * 用户重置密码
     */
    async rePassword() {
      // console.log(222, row);
      const res = await resetPwd(this.editData.userId);
      console.log(333, res);
      if (res.code == 200) {
        this.$message.success("重置成功，密码为：" + res.defaultPsw);
      }
    },

    /**
     * 用户信息编辑
     */
    handleEdit(index, row) {
      console.log("用户信息编辑", index, row);
      this.dialogTableVisible = true;
      this.editData = {
        ...row,
        sex: row.sex == "0" ? "男" : "女",
        password: "· · · · · ·",
      };
      this.imageUrl = AVATAR_URL + row.avatar;
    },

    /**
     * 用户编辑确认
     */
    async sureEditUser() {
      if (this.editData.phone) {
        console.log("add");
        // 判断编辑输入框
        if (!validPhone(this.editData.phone)) {
          Message.warning("请输入符合规定的11位手机号");
          return;
        }
      }

      const res = await editUser({
        ...this.editData,
        sex: this.editData.sex == "男" ? "0" : "1",
        roleType: this.addUserData.job == "主任医师" ? 0 : 1,
      });
      console.log("用户编辑确认结果", res);
      if (res.code != 200) return;

      this.telStatus = true;
      Message.success("编辑成功！");
      // 关闭编辑框
      this.turnEdit();
      // 获取列表数据
      this.getUserList({
        ...this.pageData,
        ...this.userSearch,
      });
    },

    /**
     * 用户新增确认
     */
    async sureAddUserData() {
      if (this.addUserData.phone) {
        console.log("add");
        // 判断新增输入框
        if (!validPhone(this.addUserData.phone)) {
          Message.warning("请输入符合规定的11位手机号");
          return;
        }
      }

      if (!this.psdStatus) {
        Message.warning("请确保两次密码输入一致");
        return;
      }

      const res = await addUser({
        ...this.addUserData,
        sex: this.addUserData.sex == "男" ? "0" : "1",
        avatar: this.imageUrl.replace(AVATAR_URL, ""),
        roleType: this.addUserData.job == "主任医师" ? 0 : 1,
      });
      console.log("用户新增确认结果", res);
      if (res.code != 200) return;

      this.telStatus = true;
      // 获取列表数据
      this.getUserList({
        ...this.pageData,
        ...this.userSearch,
      });
      Message.success("新增成功！");
      // 关闭新增框
      this.turnCreat();
      this.addUserData = {
        //初始化新增用户信息
        userId: sessionStorage.userId,
        userName: "",
        password: "",
        realName: "",
        sex: "男",
        job: "主任医师",
        deptName: "",
        phone: "",
        avatar: "",
      };
    },

    /**
     * 编辑框 取消
     */
    editCancel() {
      this.turnEdit();
    },

    /**
     * 控制新增弹窗
     */
    turnCreat() {
      this.dialogTableVisibleCreat = !this.dialogTableVisibleCreat;
    },

    /**
     * 控制编辑弹窗
     */
    turnEdit() {
      this.dialogTableVisible = !this.dialogTableVisible;
    },

    /**
     * 用户状态启用/禁用
     */
    async handleActive(index, row) {
      const res = await changeStatus({
        userId: row.userId,
        status: row.status == "1" ? 0 : 1,
      });
      // console.log('用户状态结果', res);

      if (res.code == 500) return;
      if (res.code == 200) {
        Message.success(res.msg);
        // 获取最新用户数据
        this.getUserList({
          ...this.pageData,
          ...this.userSearch,
        });
      }
    },

    /**
     * 获取科室数据
     */
    async getDeptList() {
      const res = await deptList();
      // console.log('获取科室数据', res);

      if (res.code != 200) return;
      this.deptList = res.data;
    },

    /**
     * 判断2次密码是否一致
     */
    checkPassword() {
      // console.log('失焦事件', );
      if (this.addUserData.password != this.surePassword) {
        console.log("看看密码呢", this.addUserData.password, this.surePassword);
        Message.warning("请确保两次密码输入一致");
        this.psdStatus = false;
      } else {
        this.psdStatus = true;
      }
    },

    /**
     * 重置新增用户信息
     */
    clearUserData() {
      this.surePassword = "";
      this.addUserData = {
        userName: "",
        password: "",
        realName: "",
        sex: "男",
        job: "主任医师",
        deptName: "",
        phone: "",
        avatar: "",
      };
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    /**
     * 翻页
     */
    handleCurrentChange(val) {
      // console.log('当前页', typeof val, val);
      this.pageData.pageNum = val;
    },

    /**
     * 头像上传成功
     */
    async handleAvatarSuccess(row, file) {
      console.log("上传图片结果", file);
      if (!this.uploadStatus) return;
      if (file.response.code != 200) return;
      // 头像回显
      this.imageUrl = AVATAR_URL + file.response.avatar;
      this.uploadTips = "上传成功";
      console.log("成功提示", this.uploadTips);
      //赋值头像
      this.editData.avatar = file.response.avatar;
    },
    /**
     * 头像上传之前
     */
    async beforeAvatarUpload(file) {
      this.uploadTips = "";

      const isLt1M = file.size / 1024 / 1024 < 1;

      const isImage = file.type.includes("image/");

      if (!isLt1M && isImage) {
        this.$message.warning("上传头像图片大小不能超过 1MB!");
      } else if (!isImage) {
        this.$message.warning("上传头像只能是图片!");
      }

      console.log(999, isLt1M);

      this.uploadStatus = isLt1M && isImage;
      return isLt1M && isImage;
    },
  },
};
</script>

<style lang="scss">
.user-search-item {
  position: relative;

  &:first-child {
    &::after {
      display: inline-block;
      content: "";
      width: 20px;
      height: 20px;
      background: url(../../../assets/images/search-default-icon.png) no-repeat;
      position: absolute;
      top: 24%;
      left: 5%;
      z-index: 3;
    }
  }
}

.search-item-username {
  padding-left: 40px;
  height: 40px;
  outline: none;
  border: 1px solid #999;
  font-size: 14px;
  border-radius: 4px;

  &::-webkit-input-placeholder {
    color: #c0c4cc;
  }
}
</style>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  position: absolute;
  font-size: 28px;
  color: #8c939d;
  width: 287px;
  height: 257px;
  line-height: 178px;
  text-align: center;
  top: 14%;
  left: 62.6%;
  opacity: 0;
}

.avatar {
  width: 290px;
  height: 259px;
  display: block;
  position: absolute;
  top: 14.1%;
  right: 16.8%;
}

.creatAvatar {
  width: 290px;
  height: 259px;
  display: block;
  position: absolute;
  right: 16.8%;
  top: 13.2%;
}

.user-management {
  background: #fff;
  border-radius: 4px;
  // height: 100%;
  // overflow: hidden;

  .user-management-search {
    padding: 30px;
    display: flex;

    & > * {
      flex: none;
    }

    .user-search-item {
      &:not(:first-child) {
        margin: 0 0 0 13px;
      }

      .option-item-name {
        margin-right: 7px;
        font-size: 16px;
        color: #3c3978;
      }

      .el-input--suffix {
        width: 253px;
        border-radius: 4px;
        border: solid 1px #999999;
      }
    }

    .user-btn {
      margin-left: 13px;
      line-height: normal;
    }
  }

  .user-show {
    padding: 20px 30px 0;
    border-top: 1px solid #eee;
    overflow: hidden;

    .creat {
      box-sizing: border-box;
      padding: 10px;
      width: fit-content;
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      margin-bottom: 22px;

      img {
        width: 17px;
        margin-right: 8px;
      }
    }

    .table-height {
      height: 400px;

      .el-table--border {
        border-radius: 4px;
      }

      .el-button {
        font-size: 14px;
        border-radius: 3px;
        border: solid 1px #e1e3f3;
      }

      .el-button--default {
        color: #8f87d0;

        &:hover {
          color: #fff;
          background-color: #8775ff;
          border: solid 1px #8775ff;
        }
      }

      .el-button--danger {
        border: solid 1px #e984ca;
        color: #e984ca;
        background: transparent;

        &:hover {
          color: #fff;
          background-color: #e984ca;
          border: solid 1px #e984ca;
        }
      }

      .el-button--mini {
        padding: 8px 19px;
      }
    }

    .pages {
      display: flex;
      align-content: center;
      justify-content: center;
      margin: 30px 0;

      .el-pagination {
        margin-right: 22px;
      }

      span {
        line-height: 2.4;
        font-size: 14px;

        &:nth-of-type(1) {
          color: #6e6e6e;
        }

        &:nth-of-type(2) {
          font-weight: bold;
        }
      }
    }
  }

  .el-dialog {
    .el-dialog__body {
      .edit {
        font-size: 20px;
        background-color: #f5f7fb;
        position: relative;
      }

      .edit-content {
        display: flex;
        margin: 0 60px;
        border-bottom: 1px solid #eee;
        padding: 45px 0;

        .edit-content-left {
          width: 50%;

          .edit-content-left-item {
            display: flex;
            margin: 10px 0;

            .option-item-name {
              margin-right: 15px;
            }

            .option-item-tips {
              margin-left: 15px;
            }

            span {
              display: inline-block;
              flex-shrink: 0;

              &:first-child {
                font-size: 16px;
                line-height: 2.8;
                width: 70px;
                text-align: right;
              }

              &:last-child {
                font-size: 14px;
                line-height: 3;
                text-align: left;
                color: #c1c1c1;
              }
            }

            .el-input {
              width: 180px;
              margin: 0 15px;
              border-radius: 4px;
              // border: solid 1px #999999;
            }

            .el-radio-group {
              margin-left: 20px;
              width: 180px;
              display: flex;
              align-items: center;
            }
          }
        }

        .edit-content-right {
          width: 50%;
          text-align: center;
          position: relative;

          .upload {
            margin: 0 auto;
            width: 287px;
            height: 257px;
            background-color: #707070;
            border-radius: 4px;
            opacity: 0.5;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .uploaded {
            margin: 0 auto;
            width: 287px;
            height: 257px;
          }

          .upload-content {
            img {
              margin-bottom: 10px;
            }

            color: #e6e6e6;
          }

          .upload-success {
            margin: 10px 20px;
            height: 12px;
            font-size: 14px;
            color: #ff0000;
          }

          .upload-tips {
            color: #919191;
            line-height: 24px;

            span {
              color: #000;
            }
          }
        }
      }

      .edit-btns {
        padding-left: 10%;
        padding-bottom: 5%;
        justify-content: flex-start;
      }

      .edit-re-btns {
        display: flex;
        padding-left: 10%;
        padding-bottom: 5%;
        padding-top: 1.5%;
        justify-content: space-between;

        .re-btns {
          padding: 0 !important;
        }

        .rePsd {
          margin-right: 9%;
        }
      }
    }
  }
}
</style>
